<template>
  <div class="editor-page">
    <div class="container page">
      <div class="row">

        <div class="col-md-10 offset-md-1 col-xs-12">
          <form @submit.prevent="onSubmit">
            <fieldset>
              <fieldset class="form-group">
                  <input v-model="article.title" type="text" required class="form-control form-control-lg" placeholder="Article Title">
              </fieldset>
              <fieldset class="form-group">
                  <input v-model="article.description" type="text" required class="form-control" placeholder="What's this article about?">
              </fieldset>
              <fieldset class="form-group">
                  <textarea v-model="article.body" required class="form-control" rows="8" placeholder="Write your article (in markdown)"></textarea>
              </fieldset>
              <fieldset class="form-group">
                  <input @keyup.enter="pushTag" type="text" class="form-control" placeholder="Enter tags">
                  <div class="tag-list">
                    <span
                      class="tag-default tag-pill"
                      v-for="(tag, idx) in article.tagList" :key="idx">
                      <i class="ion-close-round"></i>
                      {{ tag }}
                    </span>
                  </div>
              </fieldset>
              <button class="btn btn-lg pull-xs-right btn-primary" type="submit">
                  Publish Article
              </button>
            </fieldset>
          </form>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {
  createArticle,
  getArticle,
  updateArticle
} from '@/api'

export default {
  name: 'EditorPage',
  // 在路由匹配组件渲染之前会先执行中间件处理
  // middleware: ['', '']
  middleware: 'auth',
  head () {
    return {
      title: 'Editor - RealWorld'
    }
  },
  async asyncData ({ params }) {
    const article = {
      title: '',
      description: '',
      body: '',
      tagList: []
    }
    if (params.slug) {
      const { data } = await getArticle(params.slug)
      article.title = data.article.title
      article.description = data.article.description
      article.body = data.article.body
      article.tagList = data.article.tagList
    }

    return {
      article
    }
  },
  data() {
    return {
      article: {
        title: '',
        description: '',
        body: '',
        tagList: []
      }
    }
  },
  mounted () {
    this.lock = false;
  },
  methods: {
    async onSubmit () {
      if (this.lock) return
      this.lock = true

      const { data } = this.$route.params.slug
        ? await updateArticle(this.$route.params.slug, this.article)
        : await createArticle({ article: this.article })

      this.lock = false
      this.$router.push({
        name: 'article',
        params: {
          slug: data.article.slug
        }
      })
    },
    pushTag (e) {
      const { value } = e.target
      if (!value.trim()) return

      this.article.tagList.push(value)
    }
  }
}
</script>
